<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import moment from "moment";

const obj = ref({
    amBeginTimeHour: null,
    amBeginTimeMin: null,
    amBeginWorkHour: null,
    amBeginWorkMin: null,
    amEndTimeHour: null,
    amEndTimeMin: null,
    midBeginTimeHour: null,
    midBeginTimeMin: null,
    amEndWorkHour: null,
    amEndWorkMin: null,
    midEndTimeHour: null,
    midEndTimeMin: null,
    pmBeginTimeHour: null,
    pmBeginTimeMin: null,
    pmBeginWorkHour: null,
    pmBeginWorkMin: null,
    pmEndTimeHour: null,
    pmEndTimeMin: null,
    emBeginTimeHour: null,
    emBeginTimeMin: null,
    pmEndWorkHour: null,
    pmEndWorkMin: null,
    emEndTimeHour: null,
    emEndTimeMine: null
});


let getList = () => {
    axios({
        method: "GET",
        url: `/api/workSchedule/getTime`,
    }).then((resp) => {
        if (resp.data.code === 200) {
            // obj.value.amBeginTime = resp.data.data.amBeginTime.substring(11, 16);
            // obj.value.amBeginWork = resp.data.data.amBeginWork.substring(11, 16);
            // obj.value.amEndTime = resp.data.data.amEndTime.substring(11, 16);
            // obj.value.midBeginTime = resp.data.data.midBeginTime.substring(11, 16);
            // obj.value.amEndWork = resp.data.data.amEndWork.substring(11, 16);
            // obj.value.midEndTime = resp.data.data.midEndTime.substring(11, 16);
            // obj.value.pmBeginTime = resp.data.data.pmBeginTime.substring(11, 16);
            // obj.value.pmBeginWork = resp.data.data.pmBeginWork.substring(11, 16);
            // obj.value.pmEndTime = resp.data.data.pmEndTime.substring(11, 16);
            // obj.value.emBeginTime = resp.data.data.emBeginTime.substring(11, 16);
            // obj.value.pmEndWork = resp.data.data.pmEndWork.substring(11, 16);
            obj.value = resp.data.data;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};


const submitData = () => {
    const axiosPara = {
        data: obj.value
        // data: {
        //     amBeginTime: moment(obj.value.amBeginTime).format("YYYY-MM-DD HH:mm:ss"),
        //     amBeginWork: moment(obj.value.amBeginWork).format("YYYY-MM-DD HH:mm:ss"),
        //     amEndTime: moment(obj.value.amEndTime).format("YYYY-MM-DD HH:mm:ss"),
        //     midBeginTime: moment(obj.value.midBeginTime).format("YYYY-MM-DD HH:mm:ss"),
        //     amEndWork: moment(obj.value.amEndWork).format("YYYY-MM-DD HH:mm:ss"),
        //     midEndTime: moment(obj.value.midEndTime).format("YYYY-MM-DD HH:mm:ss"),
        //     pmBeginTime: moment(obj.value.pmBeginTime).format("YYYY-MM-DD HH:mm:ss"),
        //     pmBeginWork: moment(obj.value.pmBeginWork).format("YYYY-MM-DD HH:mm:ss"),
        //     pmEndTime: moment(obj.value.pmEndTime).format("YYYY-MM-DD HH:mm:ss"),
        //     emBeginTime: moment(obj.value.emBeginTime).format("YYYY-MM-DD HH:mm:ss"),
        //     pmEndWork: moment(obj.value.pmEndWork).format("YYYY-MM-DD HH:mm:ss"),
        //     emEndTime: moment(obj.value.emEndTime).format("YYYY-MM-DD HH:mm:ss"),
        // }
    };

    axiosPara.method = "PATCH";
    axiosPara.url = "/api/workSchedule/update";

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

onMounted(() => {
    getList();
});
</script>

<template>
    <el-form>
        <el-form-item label="早上开始打卡时间">
            <el-input v-model="obj.amBeginTimeHour" />:
            <el-input v-model="obj.amBeginTimeMin" />
        </el-form-item>

        <el-form-item label="早上开始上班时间">
            <el-input v-model="obj.amBeginWorkHour" />:
            <el-input v-model="obj.amBeginWorkMin" />
        </el-form-item>

        <el-form-item label="早上结束打卡时间">
            <el-input v-model="obj.amEndTimeHour" />:
            <el-input v-model="obj.amEndTimeMin" />
        </el-form-item>

        <el-form-item label="中午开始打卡时间">
            <el-input v-model="obj.midBeginTimeHour" />:
            <el-input v-model="obj.midBeginTimeMin" />
        </el-form-item>

        <el-form-item label="中午开始下班时间">
            <el-input v-model="obj.amEndWorkHour" />:
            <el-input v-model="obj.amEndWorkMin" />
        </el-form-item>

        <el-form-item label="中午结束打卡时间">
            <el-input v-model="obj.midEndTimeHour" />:
            <el-input v-model="obj.midEndTimeMin" />
        </el-form-item>

        <el-form-item label="下午开始打卡时间">
            <el-input v-model="obj.pmBeginTimeHour" />:
            <el-input v-model="obj.pmBeginTimeMin" />
        </el-form-item>

        <el-form-item label="下午开始上班时间">
            <el-input v-model="obj.pmBeginWorkHour" />:
            <el-input v-model="obj.pmBeginWorkMin" />
        </el-form-item>

        <el-form-item label="下午结束打卡时间">
            <el-input v-model="obj.pmEndTimeHour" />:
            <el-input v-model="obj.pmEndTimeMin" />
        </el-form-item>

        <el-form-item label="晚上开始打卡时间">
            <el-input v-model="obj.emBeginTimeHour" />:
            <el-input v-model="obj.emBeginTimeMin" />
        </el-form-item>

        <el-form-item label="晚上开始下班时间">
            <el-input v-model="obj.pmEndWorkHour" />:
            <el-input v-model="obj.pmEndWorkMin" />
        </el-form-item>

        <el-form-item label="晚上结束打卡时间">
            <el-input v-model="obj.emEndTimeHour" />:
            <el-input v-model="obj.emEndTimeMin" />
        </el-form-item>

    </el-form>
    <el-button type="warning" round @click="submitData">提交修改</el-button>
</template>

<style scoped>
.el-input{
    width: 50px;
    margin: 0 5px;
}
</style>